<template>
  <view class="max_box">
    <u-swiper radius="0" height="480rpx" imgMode="aspectFill" :list="imglist" :autoplay="true" @click="previewPhoto"
      indicatorStyle="right: 20px" @change="e => (currentNum = e.current + 1)">
      <view slot="indicator" class="indicator-num">
        <text class="indicator-num__text">{{ currentNum }}/{{ imglist.length }}</text>
      </view>
    </u-swiper>
    <!-- 操作 -->
    <view class="nav_box">
      <view class="top_box">
        <view class="name-box">
          <view class="name">
            {{ showTitle }}
          </view>
        </view>
        <!-- 门店选择 -->
        <picker :value="currIndex" :range="shopArray" @change="bindPickerChange">
          <view class="shop_toggle" v-if="shopArray.length > 1">
            <view class="toggle_box">
              <uni-icons size="32rpx" color="#eee;" custom-prefix="iconfont2" style="margin-top: 6rpx; margin-right: 2rpx"
                type="icon-jiantou_zuoyouqiehuan"></uni-icons>
              切换门店
            </view>
          </view>
        </picker>
      </view>
      <view class="tag_box">
        <text v-if="currShop.company_type === 1 ||
          currShop.company_type === 3
          " class="tag">门店展厅</text>
        <text v-if="currShop.company_type === 2 ||
          currShop.company_type === 3
          " class="tag">售后服务</text>
      </view>
      <view class="bottom_box">
        <view class="address">
          <view class="iconfont red" style="font-size: 40rpx">&#xe627;</view>
          <view class="box">
            <view class="text">{{ currShop.markers_address }}</view>
            <view v-if="!isNaN(getDistance())" class="text text2">距您: {{ getDistance() }}公里</view>
          </view>
        </view>
        <view class="navOrPhoto">
          <view class="iconfont red" @click="goStore">&#xe640;</view>
          <view class="iconfont red" @click="openPopup()">&#xe610;</view>
        </view>
      </view>
    </view>
    <view class="title_box">
      <view class="intro">门店简介</view>
      <!-- 视频 -->
      <view class="video_box" v-if="companyInof.company_video">
        <video autoplay controls :muted="true" page-gesture show-mute-btn vslide-gesture class="videoCss"
          :src="`${baseUrl}/video/${companyInof.company_video}`"></video>
      </view>
      <!-- 公司图片 -->
      <view class="companPhoto_box" :key="photoItem.id" v-show="currIndex === index"
        v-for="(photoItem, index) in comShop">
      </view>
      <!-- 公司标题 -->
      <!-- 公司文字介绍 -->
      <view class="text_box">
        <text class="companyInof" v-if="currShop.markers_content">{{ currShop.markers_content }}</text>
        <text class="companyInof" v-else>{{ companyInof.company_text }}</text>
      </view>
    </view>
    <view class="to-shop" @click="goShop" v-if="companyInof.goods_no > 0">
      <uni-icons type="shop" size="36rpx" color="#fafafa"></uni-icons>
      商城
    </view>
    <u-popup :show="popupShow" @close="popupShow = false">
      <!-- 电话 -->
      <view class="photo_box">
        <view class="photo_box__title">联系我们</view>
        <view class="box">
          <view class="photo_no" :key="v.name" v-for="v in telephoneList" @click="phoneCall(v.tel)">
            {{ v.name }}
            <text class="text">{{ v.tel }}</text>
          </view>
        </view>
        <view class="cancel" @click.stop="closePopup">取 消</view>
      </view>
    </u-popup>
    <!-- 弹窗结束 -->
    <view style="height: 20rpx"></view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getDistance } from '@/utils/utils'
import { companyDetailApi } from '@/API/reqData'
export default {
  data() {
    return {
      popupShow: false,
      // 标签
      currIndex: 0,
      // 公司客服
      companyService: [],
      // 公司详情
      companyInof: {},
      // 公司门店
      comShop: [],
      // 基础路径
      baseUrl: this.$baseUrl,
      areaInfo: {},
      id: 0, // 使用 marker点击事件 需要填写id
      title: 'map',
      latitude: 23.1347835,
      longitude: 113.41,
      // 第一家店铺
      firstStore: {},
      currPhoto: 0,
      lcationName: '',
      shopArray: [],
      currentNum: 1
    }
  },
  onLoad(options) {
    let { compaId } = options
    // 获取公司详情
    this.getCompanyDetailApi(compaId)
    // 计算距离
    this.getDistance()
    // 混合分享信息
    this.shareMixin.title = `门店详情`
    this.shareMixin.path = `/pages/StorePage/StoreDetails`
    this.shareMixin.query = `compaId=${compaId}`
  },
  methods: {
    // 导航到店
    goStore() {
      uni.openLocation({
        latitude: parseFloat(this.latitude),
        longitude: parseFloat(this.longitude),
        name: this.lcationName,
        address: this.currShop.markers_address
      })
    },
    async getCompanyDetailApi(company_id) {
      const {
        data: { data }
      } = await companyDetailApi({ company_id })
      this.companyService = data.company_curservice
      this.companyInof = data.company_info[0]
      let baseUrl = `${this.baseUrl}/images/company/4s/`

      data.company_list.forEach(item => {
        this.shopArray.push(
          `${item.company_type === 1 ? '经销商' : '售后服务'}-${item.markers_title
          }`
        )
        item.images_library = item?.images_library
          .split(';')
          .filter(Boolean)
          .map(item2 => (item = `${baseUrl}${item2}`))
      })

      this.comShop = data.company_list

      let { latitude, longitude, markers_title } = this.comShop[0]
      this.lcationName = markers_title
      this.latitude = latitude
      this.longitude = longitude
    },
    // 预览图片
    previewPhoto(i) {
      this.currPhoto = i
      uni.previewImage({
        current: this.currPhoto,
        urls: this.imglist
      })
    },
    // 计算距离
    getDistance() {
      let { latitude, longitude, } = this.latLog
      let distance = getDistance(
        this.longitude,
        this.latitude,
        longitude,
        latitude
      ).toFixed(1)
      return distance
    },
    // 打电话
    phoneCall(e) {
      uni.makePhoneCall({
        phoneNumber: `${e}`
      })
    },
    openPopup() {
      // this.$refs.popup.open()
      this.popupShow = true
    },
    // 关闭联系人
    closePopup() {
      // this.$refs.popup.close()
      this.popupShow = false
    },
    // 门店选择
    bindPickerChange: function (e) {
      this.currIndex = e.detail.value
      let { latitude, longitude, markers_title } = this.comShop[e.detail.value]
      this.lcationName = markers_title
      this.latitude = latitude
      this.longitude = longitude
      // 重新计算距离
      this.getDistance()
      this.currentNum = 1
    },
    // 去商城
    goShop() {
      let id = this.companyInof?.id
      this.saveComIndex(id)
      uni.switchTab({ url: `/pages/Shop/ShopAdmin` })
    },
    ...mapMutations(['saveComIndex']),
  },
  computed: {
    ...mapState(['latLog']),
    // 标题
    showTitle() {
      return this.shopArray[this.currIndex]?.split('-')[1]
    },
    currShop() {
      return this.comShop[this.currIndex] || {}
    },
    imglist() {
      let temp2 = this.currShop
      let src = ''
      if (!!temp2?.company_images) {
        src = `${this.baseUrl}/images/company/4s/${temp2?.company_images}`
      }
      let temp3 = temp2?.images_library || []
      let temp = [src, ...temp3].filter(Boolean)
      return temp || []
    },
    // 手机号列表
    telephoneList() {
      let temp = []
      let tel = this.currShop
      if (tel?.sale_hotline) {
        temp.push({ name: '销售热线', tel: tel.sale_hotline })
      }
      if (tel?.after_sales_hotline) {
        temp.push({ name: '售后热线', tel: tel.after_sales_hotline })
      }
      if (tel?.appointment_telephone) {
        temp.push({ name: '预约电话', tel: tel.appointment_telephone })
      }
      if (tel?.rescue_telephone) {
        temp.push({ name: '救援电话', tel: tel.rescue_telephone })
      }
      if (tel?.service_hotline) {
        temp.push({ name: '服务热线', tel: tel.service_hotline })
      }
      return temp
    }
  }
}
</script>

<style lang="scss" scoped>
.top_img {
  position: relative;

  .btn {
    width: 50px;
    height: 18px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    background-color: #fafafa;
  }
}

.nav_box {
  padding: 20rpx 25rpx;
  border-radius: 12rpx;
  margin: 40rpx 30rpx 30rpx 30rpx;
  box-shadow: $theme-shadow;

  .red {
    font-size: 60rpx;
    color: $klm-color;
  }

  .top_box {
    display: flex;
    justify-content: space-between;
    height: 48px;
    align-items: center;

    .name-box {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .name {
        margin-right: auto;
        font-size: 34rpx;
        font-weight: 600;
        color: #222222;
        line-height: 40rpx;
      }

      .shop {
        font-size: 32rpx;
        line-height: 40rpx;
        color: #cb1c39;
        margin-right: 8rpx;
      }
    }

    .shop_toggle {
      color: #fff;
      padding: 12rpx 20rpx;
      border-radius: 4rpx;
      font-size: 24rpx;
      background-color: #cb1c39;

      .toggle_box {
        display: flex;
        align-items: center;
        justify-content: center;

        .uni-icons {
          margin-left: 4rpx;
        }
      }
    }
  }

  .tag_box {
    margin-bottom: 10rpx;

    .tag {
      margin: 15rpx 15rpx 15rpx 0rpx;
      color: #cb1c39;
      padding: 5rpx 14rpx;
      border-radius: 20rpx;
      line-height: 40rpx;
      font-size: 24rpx;
      background-color: #ece6e6;
    }
  }

  .bottom_box {
    display: flex;
    // height: 70px;
    align-items: center;
    justify-content: space-between;

    .address {
      display: flex;
      flex: 1;
      font-size: 26rpx;
      font-weight: 500;
      color: #222222;

      // color: #18bc37;
      uni-icons {
        width: 30rpx;
      }

      .box {
        flex: 1;

        .text {
          padding-left: 4rpx;
        }

        .text2 {
          margin-top: 10rpx;
        }
      }
    }

    .navOrPhoto {
      width: 160rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      uni-icons,
      .iconfont {
        margin: 0rpx 20rpx;
      }
    }
  }
}

.max_box {
  margin-bottom: 20rpx;
  background: #fafafa;

  .title {
    font-size: 32rpx;
    font-weight: 600;
    color: #222222;
    line-height: 60rpx;
    margin-bottom: 10rpx;
    // margin: 0 30rpx;
    position: relative;
    padding-left: 16rpx;

    &::before {
      content: '  ';
      width: 8rpx;
      display: block;
      height: 40rpx;
      background-color: $theme-color;
      position: absolute;
      top: 14rpx;
      left: 0rpx;
    }
  }

  .companPhoto_box {
    margin: 30rpx 0rpx;

    .img {
      box-shadow: $theme-shadow;
    }
  }

  .title_box {
    padding: 20rpx 40rpx 70rpx;
    background: #fff;
    border-radius: 12rpx;

    .intro {
      padding-left: 24rpx;
      font-size: 34rpx;
      font-weight: 500;
      line-height: 74rpx;
      width: 50%;
      border-bottom: 6rpx solid #de4141;
    }

    .video_box {
      margin-top: 30rpx;
      border-radius: 12rpx;

      .videoCss {
        width: 100%;
        border-radius: 6rpx;
      }
    }

    .text_box {
      padding: 0 12rpx;

      .companyInof {
        line-height: 48rpx;
      }
    }
  }

  .info_box {

    .img_box {
      margin: 30rpx 20rpx;
      margin-bottom: 30rpx;
      column-count: 2;
      column-gap: 2rpx;
      padding: 8rpx;
      box-shadow: $theme-shadow;

      .img {

        padding: 15rpx;
        width: 360rpx;
        overflow-y: scroll;
        border-radius: 20rpx;
        -moz-border-radius: 20rpx;
        -webkit-overflow-scrolling: touch;
      }
    }
  }

  // 标签栏
  .area_item {
    flex: 1;
    line-height: 36px;
    text-align: center;
    min-width: 90px;
    color: #333;

    &.active {
      color: #fafafa;
      background-color: $theme-color;
    }

    &.borderLeft {
      border-left: $theme-color 1px solid;
    }
  }

  .photo_box {
    background-color: #f6f6f6;

    &__title {
      text-align: center;
      line-height: 86rpx;
      font-size: 30rpx;
      background-color: #fff;
      border-bottom: 1px solid #eee;
    }

    .box {
      background-color: #fff;

      .photo_no {
        text-align: center;
        border-bottom: 1px solid #eee;

        .text {
          display: inline-block;
          padding: 0 10rpx;
          line-height: 108rpx;
          font-size: 28rpx;
          color: $theme-color;
        }
      }
    }

    .cancel {
      margin-top: 8px;
      text-align: center;
      line-height: 118rpx;
      font-size: 30rpx;
      background-color: #fff;
    }
  }

  .to-shop {
    width: 80rpx;
    height: 80rpx;
    position: fixed;
    right: 30px;
    bottom: 100px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20rpx;
    color: #fafafa;
  }
}
</style>
<style lang="scss">
.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  @include flex;
  justify-content: center;

  &__text {
    color: #ffffff;
    font-size: 12px;
  }
}
</style>
